<template>
	<!-- 20230509 -->
	<view class="mall-order-page">
		<!-- 页面内容 -->
		<view class="page-content padding-bottom-safe-footer-20">

			<!-- 下单详情 -->
			<view class="margin-top-20 margin-lr-30">

				<!-- 选择地址 -->
				<view class="">
					<ty-bar-address :address="address"></ty-bar-address>
				</view>

				<!-- 下单商品列表 -->
				<view class="margin-top-20">
					<view class="padding-lr-20 radius-10 bg-ff">
						<jc-mall-orderProducts :list="orderProduct" :is-price-highlight="true"></jc-mall-orderProducts>
					</view>
				</view>
			</view>

			<!-- 付款信息 -->
			<view class="margin-top-20 margin-lr-30 padding-lr-20 radius-10 bg-ff">
				
				<view class="padding-tb-15">
					<view class="line-height-70 flex align-center justify-between">
						<text class="text-28 text-33">商品合计</text>
						<text class="text-28 text-bold text-main">¥{{totalPrice}}</text>
					</view>
					
					<view class="line-height-70 flex align-center justify-between">
						<text class="text-28 text-33">运费</text>
						<text class="text-28 text-bold text-main">{{freight > 0 ? '+¥' + freight : '包邮 免运费'}}</text>
					</view>

					<view class="line-height-70 flex align-center justify-between">
						<text class="text-28 text-33">优惠券</text>
						<view class="flex align-center" @tap="go('pages/discount/coupon/choose?price='+totalPrice+'&coupon_id='+coupon.id)">
							<!-- 选择完优惠券 -->
							<text class="text-28 text-bold text-main" v-if="coupon.id">-¥{{coupon.price}}</text>
							<!-- 没有选择优惠券，但是有可用优惠券 -->
							<text class="text-28 text-bold text-main"
								v-else-if="canChooseCouponNumber > 0">{{canChooseCouponNumber}}张可用</text>
							<!-- 没有选择优惠券，无可用优惠券 -->
							<text class="text-28 text-aa" v-else>暂无可用优惠券</text>
							<text class="tyIcon-arrow-right margin-left-15 text-24 text-77"></text>
						</view>
					</view>
				</view>
				
				<view class="padding-top-30 padding-bottom-20 border-top-ed">
					<view class="padding-bottom-20 text-28 text-33">备注</view>
					<view class="padding-20 radius-10 bg-f5">
						<textarea class="textarea line-40 text-26" placeholder="建议留言前与客服协商一致"
							placeholder-class="text-26 text-cc" maxlength="200" v-model="remark"
							:show-count="false"></textarea>
						<view class="flex justify-end text-26">
							{{remark.length > 200 ? 200 : remark.length}}/200
						</view>
					</view>
				</view>

			</view>

			<!-- 底部 -->
			<view class="jc-footer-safe bg-ff">
				<view class="line-height-footer padding-lr-30 flex align-center justify-between">
					<view class="flex align-center">
						<text class="text-28">实付：</text>
						<view class="text-price text-32 text-bold text-main">
							{{payMoney}}
						</view>
					</view>
					<view class="width-210 line-height-75 bg-main text-center text-30 text-ff"
						style="border-radius: 38rpx;" @click="goPay">去付款</view>
				</view>
			</view>
		</view>

		<!-- 页面浮层 -->
		<view class="page-layer">
			<!-- 支付宝H5支付组件 -->
			<ty-function-h5-alipay :raw-html="rawHtml"></ty-function-h5-alipay>
			
			<!-- 订单支付方式 -->
			<ty-layer-pay :show.sync="isPayLayerShow" :money="myMoney" :pay-money="payMoney" @pay="pay"></ty-layer-pay>
		</view>
	</view>
</template>

<script>
	import money from '../money/api/money.js'
	import mall from './api/mall.js'
	export default {
		data() {
			return {
				// 下单类型 1--商城 2--秒杀商城
				type: 1,
				// type=2时，秒杀商品ID
				spikeProductId: '',
				// 购买类型 1--购物车 2--立即购买
				buyType: '',
				// buyType=2时，产品ID
				productId: '',
				// buyType=2时，产品SKU
				sku: '',
				// buyType=2时，产品购买数量
				number: '',

				// 选择地址
				address: {},
				// 选择优惠券
				coupon: {},
				// 可选优惠券张数
				canChooseCouponNumber: 0,
				// 是否选择默认的最大可选优惠券
				isChooseDefaultCoupon: 1,
				// 展示商品
				orderProduct: [],
				// 商品合计
				totalPrice: 0,
				// 运费
				freight: 0,
				// 备注
				remark: '',
				// 实际支付
				payMoney: 0,

				// 支付浮层是否显示 false--不显示 true--显示
				isPayLayerShow: false,
				// 我的余额
				myMoney: 0,
				// H5支付宝支付表单
				rawHtml: '',
				// 组件用：支付方式
				payWay: ['weixin', 'alipay', 'money']
			}
		},

		onLoad(options) {
			// 下单类型 1--商城 2--秒杀商城
			this.type = options.type || 1
			// type=2时，秒杀商品ID
			this.spikeProductId = options.spike_product_id || ''
			// 购买类型 1--购物车 2--立即购买
			this.buyType = options.buy_type || ''
			// buyType=2时，产品ID
			this.productId = options.product_id || ''
			// buyType=2时，产品SKU
			this.sku = options.sku || ''
			// buyType=2时，产品购买数量
			this.number = options.number || ''
		},

		onShow() {
			// 加载订单预览数据
			this.loadOrderReady()

			// #ifdef H5
			// 是否为跳转H5支付返回
			if (this.cn.userAgent() == 'h5') { //H5环境
				// H5微信支付时，已跳转H5微信支付页面
				if (uni.getStorageSync('hasOpenMwebUrl')) {
					uni.removeStorageSync('hasOpenMwebUrl')
					// 弹窗提示
					this.cn.confirm('请确认支付是否已完成', "已取消支付", "已完成支付").then(res => {
						uni.redirectTo({
							url: '/pages/mall/my/orderList'
						})
					})
				}
			}
			// #endif
		},

		onReady() {
			// #ifdef H5
			if (this.cn.userAgent() == 'weixin') {
				// 兼容微信公众号支付路径，避免报错“当前URL未注册”
				this.cn.curUrlReload()
			}
			// #endif

			// 获取我的余额
			money.getMyMoney().then(res => {
				if (res.code == 0) {
					this.myMoney = res.data.my.money
				}
			})
		},

		onUnload() {
			// globalData恢复初始值
			getApp().globalData.order.myAddressId = ''
			getApp().globalData.order.myCouponId = ''
			getApp().globalData.order.isHasChooseCoupon = 0
		},

		methods: {
			/** 
			 * 加载订单预览数据
			 * @date 2022-10-13
			 */
			loadOrderReady() {
				let globalData = getApp().globalData

				// 我的地址ID
				let myAddressId = globalData.order.myAddressId ? globalData.order.myAddressId : ''

				// 已经手动选择过优惠券，就不默认选择最大优惠券了
				if (globalData.order.isHasChooseCoupon == 1) {
					this.isChooseDefaultCoupon = 0
				}

				// 我的优惠券
				let myCouponId = globalData.order.myCouponId ? globalData.order.myCouponId : ''

				// 加载订单预览数据
				mall.order.getOrderReady(this.type, this.buyType, myAddressId, this.productId, this
					.sku, this.number, this.isChooseDefaultCoupon, myCouponId, this.spikeProductId).then(res => {
					if (res.code == 0) {
						// 有地址
						if (res.data.my_address) {
							globalData.order.myAddressId = res.data.my_address.id
							this.address = res.data.my_address
						} else {
							globalData.order.myAddressId = ''
							this.address = {}
						}

						// 默认选择最大的优惠券
						if (res.data.choose_my_coupon) {
							globalData.order.myCouponId = res.data.choose_my_coupon.id
							this.coupon = res.data.choose_my_coupon
						}

						// 购买产品
						this.orderProduct = res.data.order_product
						// 购买产品
						this.canChooseCouponNumber = res.data.can_choose_coupon_number
						// 总价钱
						this.totalPrice = res.data.total_price
						// 运费
						this.freight = res.data.freight
						// 实际付款
						this.payMoney = res.data.pay_money
					}
				})
			},

			/**
			 * 选择付款方式
			 * @date 2022-10-31
			 */
			goPay() {
				// 我的地址ID
				let myAddressId = this.address.id ? this.address.id : ''

				if (!this.address.id) {
					this.cn.toast('请选择地址')
					return false
				}

				// 需要支付金额为0
				if (this.payMoney == 0) {
					// 提交订单并调起支付 
					this.pay({
						pay_type: 0
					})
				} else {
					// 显示付款浮层
					this.isPayLayerShow = true
				}
			},

			/**
			 * 提交订单并支付
			 * @param {Object} e
			 * @param {Object} e.pay_type 0--无需支付 1--微信支付 2--支付宝支付 3--余额支付
			 * @date 2022-10-31
			 */
			pay(e) {
				// 我的优惠券
				let myCouponId = this.coupon.id ? this.coupon.id : ''
				// 我的地址ID
				let myAddressId = this.address.id ? this.address.id : ''

				if (!this.address.id) {
					this.cn.toast('请选择地址')
					return false
				}

				mall.order.insertOrder(this.type, this.buyType, myAddressId, this.productId, this
					.sku, this.number, myCouponId, e.pay_type, this.remark, this.spikeProductId).then(res => {
					// globalData恢复初始值
					getApp().globalData.order.myAddressId = ''
					getApp().globalData.order.myCouponId = ''
					getApp().globalData.order.isHasChooseCoupon = 0

					if (res.code == 0) {
						// 需要支付
						if (res.data.need_pay == 1) {
							// H5调起支付宝支付
							if (this.cn.userAgent() == 'h5' && e.pay_type == 2) {
								this.rawHtml = res.data.pay_params
								// H5调起微信支付
							} else if (this.cn.userAgent() == 'h5' && e.pay_type == 1) {
								// 关闭支付浮层
								this.isPayLayerShow = false
								// 记录已跳转状态
								uni.setStorageSync('hasOpenMwebUrl', 1)
								// 跳转H5支付
								window.location.href = res.data.pay_params
								// 其他情况
							} else {
								// 1--微信支付 2--支付宝支付
								let payType = e.pay_type
								// 调起支付
								this.cn.requestPayment(res.data.pay_params, payType).then(res => {
									uni.redirectTo({
										url: '/pages/mall/my/orderList'
									})
								}).catch(res => {
									uni.redirectTo({
										url: '/pages/mall/my/orderList'
									})
								})
							}
							// 不需要支付
						} else {
							this.cn.alert(res.msg).then(res => {
								uni.redirectTo({
									url: '/pages/mall/my/orderList'
								})
							})
						}
					} else {
						// 关闭支付浮层
						this.isPayLayerShow = false
					}
				})
			}
		}
	}
</script>

<style scoped>
	/* 备注 */
	.textarea {
		width: 100%;
		height: 120rpx;
		line-height: 40rpx;
	}
</style>